<script setup>
import { ref, computed } from "vue"
import { useRouter, useRoute } from "vue-router"

const router = useRouter()
const route = useRoute()
const isCollapse = ref(false)

// 获取路由列表
const routes = computed(() => {
  return router.options.routes
})

// 当前激活的菜单
const activeMenu = computed(() => {
  return route.path
})

// 菜单点击事件
const handleMenuClick = path => {
  router.push(path)
}
</script>

<template>
  <el-container class="layout-container">
    <!-- 左侧导航 -->
    <el-aside :width="isCollapse ? 'var(--sidebar-collapsed-width)' : 'var(--sidebar-width)'">
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical"
        :collapse="isCollapse"
        router
      >
        <el-menu-item
          v-for="route in routes"
          :key="route.path"
          :index="route.path"
          @click="handleMenuClick(route.path)"
        >
          <el-icon>
            <component :is="route.meta?.icon" />
          </el-icon>
          <span>{{ route.meta?.title }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <!-- 顶部导航 -->
      <el-header>
        <div class="header-container">
          <div class="logo">Three演示系统</div>
          <div class="header-right">
            <el-button
              type="text"
              :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
              @click="isCollapse = !isCollapse"
            />
          </div>
        </div>
      </el-header>

      <!-- 主要内容区域 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;

  .el-header {
    background-color: #fff;
    border-bottom: 1px solid #dcdfe6;
    height: var(--header-height);
  }

  .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;

    .logo {
      font-size: 20px;
      font-weight: bold;
    }
  }

  .el-menu-vertical {
    height: 100%;
    border-right: none;

    &:not(.el-menu--collapse) {
      width: var(--sidebar-width);
    }
  }
  .el-main {
    padding: 0;
  }
}
</style>
